<script setup>
import { onBeforeUnmount, ref, getCurrentInstance, onMounted } from 'vue';
import { theme } from 'ant-design-vue';
import { useSettingStore } from "@/stores/setting"
import { useDark } from "@vueuse/core";
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');
const locale = ref(zhCN);
const { Bus } = getCurrentInstance().appContext.config.globalProperties;
const useSetting = useSettingStore();
const type = ref();
const defaultColor = ref();
const isDark = useDark({
    selector: 'html',
    attribute: 'theme',
    valueDark: 'dark',
    valueLight: 'light',
})

const token = ref({
    colorPrimary: useSetting.pureColor,
    colorLink: useSetting.pureColor,
    colorLinkActive: useSetting.pureColor,
    colorLinkHover: useSetting.pureColor,
    borderRadiusLG: 0,
    borderRadiusOuter: 0,
    borderRadiusSM: 0,
    borderRadiusXS: 0,
    borderRadius: 0,
})
onMounted(() => {
    document.documentElement.style.setProperty('--themeColor', useSetting.pureColor);
    changeStatus();
    if (isDark) {
        isDark.value ? (type.value = theme.darkAlgorithm) : (type.value = theme.defaultAlgorithm)
    }
})
Bus.on('changeColor', () => {
    changeStatus();
    document.documentElement.style.setProperty('--themeColor', useSetting.pureColor);
    console.log(token.value)
})
const changeStatus = () => {
    token.value.colorPrimary = useSetting.pureColor
    token.value.colorLink = useSetting.pureColor
    token.value.colorLinkActive = useSetting.pureColor
    token.value.colorLinkHover = useSetting.pureColor
}
Bus.on('changeLight', (res) => {
    res.value ? (type.value = theme.darkAlgorithm) : (type.value = theme.defaultAlgorithm)
})
onBeforeUnmount(() => {
    Bus.all.clear();
})
</script>

<template>
    <a-config-provider :locale="locale" :theme="{
        algorithm: type,
        token: token,
    }">
        <RouterView />
    </a-config-provider>
</template>

<style lang="scss">
[v-cloak] {	
    display: none !important;
}
</style>
